<script setup>
import { ref, onMounted } from 'vue';
import { queryAllApi,addApi,queryByIdApi,updateApi,deleteApi } from '@/api/dept';
import { ElMessage ,ElMessageBox} from 'element-plus';


//钩子函数
onMounted(()=>{
  search(); 
})
//查询
const search = async() =>{
  // const result = await axios.get('https://m1.apifoxmock.com/m1/6532582-6235014-default/depts');
  // if(result.data.code){
  //   deptList.value = result.data.data;
  // }
  const result = await queryAllApi();
  if(result.code){
    deptList.value = result.data;
  }
}
const deptList = ref([])

//  dialog对话框
const dialogFormVisible = ref(false);
const formTitle = ref('');
const dept = ref({name:''});

//添加部门
const addDept = () =>{ 
  dialogFormVisible.value = true;
  formTitle.value = '添加部门';
  dept.value = {name:''};
  //重置表单的校验规则提示信息
  if(deptFormRef.value){
    deptFormRef.value.resetFields();
  }
}

//保存部门
const save = async ()  =>{ 
  //进行表单校验
  if(!deptFormRef.value) return;
  deptFormRef.value.validate(async (valid) =>{ 
    //valid表示是否校验通过，true表示通过，false表示失败
    if(valid){
      let result;
      if(dept.value.id){//编辑
        result = await updateApi(dept.value);
      }else{//添加
        result = await addApi(dept.value);
      }

      if(result.code){//成功
      //提示信息
      ElMessage.success('添加成功');
      //关闭对话框
      dialogFormVisible.value = false;
      //刷新列表
      search();
      }
    }else{//失败
      ElMessage.error('请填写正确的信息');
    }
  })
  
}

//表单校验规则
const rules = ref({
  name:[
    {required:true,message:'部门名称不能为空',trigger:'blur'},
    {min:2,max:10,message:'部门名称长度为2-10个字符',trigger:'blur'}
  ]
})
const deptFormRef = ref();

//编辑
const edit = async (id) =>{
  formTitle.value = '编辑部门';
  //重置表单的校验规则提示信息
  if(deptFormRef.value){
    deptFormRef.value.resetFields();
  }
  const result = await queryByIdApi(id);
  if(result.code){
    dialogFormVisible.value = true;
    dept.value = result.data;
  }
}

//删除
const deleteById = async (id) =>{
  //消息弹出框 
  ElMessageBox.confirm(
    '您确认删除该部门吗？',
    '提示',
    {
      confirmButtonText: '确认',
      cancelButtonText: '取消',
      type: 'warning',
    }
  )
    .then( async () => {//点击确认按钮
      const result = await deleteApi(id)
      if(result.code){
        ElMessage.success('删除成功');
        search();
      }
      else{
        ElMessage.error(result.msg); 
      }
    })
    .catch(() => {//取消按钮
      ElMessage.success('已取消删除');
    }) 
}
</script>

<template>
  <h1>部门管理</h1>
    <div class="container">
      <el-button type="primary" @click="addDept"> + 添加部门</el-button>
    </div>

    <div class="container">
      <el-table :data="deptList" border style="width: 100%">
        <el-table-column type="index" label="序号" width="80" align="center" />
        <el-table-column prop="name" label="部门名称" width="260" align="center"/>
        <el-table-column prop="updateTime" label="最后操作时间" width="300" align="center"/>
        <el-table-column label="操作" align="center">
          <template #default="scope">
            <el-button type="primary" size="small" @click="edit(scope.row.id)"><el-icon><EditPen /></el-icon>编辑</el-button>
            <el-button type="danger" size="small" @click="deleteById(scope.row.id)"><el-icon><DeleteFilled /></el-icon>删除</el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>

    <!-- dialog对话框 -->
    <el-dialog v-model="dialogFormVisible" :title="formTitle" width="500">
    <el-form :model="dept" :rules="rules" ref="deptFormRef">
      <el-form-item label="部门名称" label-width="80px" prop="name">
        <el-input v-model="dept.name"/>
      </el-form-item>
    </el-form>
    <template #footer>
      <div class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取消</el-button>
        <el-button type="primary" @click="save">确定</el-button>
      </div>
    </template>
  </el-dialog>
</template>

<style scoped>
  .container {
    margin: 10px 0px;
  }

 
</style>
